import React from 'react';


class InputFilter extends React.Component{
  constructor(props){
    super(props);
    this.changeArr = this.changeArr.bind(this);
  }
  changeArr(event){
    var name = event.target.value;
    this.props.filterArr(name);
  }
  doNothing(par,e){
    console.log(e.nativeEvent);
    this.props.cli();
    e.stopPropagation();
    e.nativeEvent.stopImmediatePropagation();
  }
  render(){
    return(
      <input type="text" onChange={this.changeArr.bind(this)} onClick={this.doNothing.bind(this,event)}/>
    )
  }
}

class SelectOption extends  React.Component{
  constructor(props){
    super(props)
  }

  changeShow(){
    if(this.state.show){
      this.setState({
        css:{display:'none'},
        show:false
      })
    }else {
      this.setState({
        css:{display:'block'},
        show:true
      })
    }

  }


  render(){
    return(
      <li style={this.props.css} onClick={this.props.tel}>
        {this.props.text}
      </li>
    )
  }
}

class SelectOptions extends React.Component{
  constructor(props){
    super(props);
    this.state = {css:{display:'none'},show:true,options:this.props.options};
    this.changeShow = this.changeShow.bind(this);
    this.tellVal = this.tellVal.bind(this);
  }
  componentWillUnmount(){
    console.log(0);
  }
  tellVal(name){
    this.props.change(name);
  }
  changArr(name){
    if(!name || name.length == 0){
      this.setState({
        options:this.props.options
      });
    }else {
      let arr = [];
      this.props.options.map( (i) => {
        console.log(i.name.indexOf(name));
        if(i.name.indexOf(name) != -1){
           arr.push(i)
        }
      });
      console.log(arr);
      this.setState({
        options:arr
      });
    }

  }
  changeShow(){
    if(this.state.show){
      this.setState({
        css:{display:'block',cursor:'pointer'},
        show:false
      })
    }else {
      this.setState({
        css: {display: 'none'},
        show: true
      })
    }
  }
  showLi(){
    this.setState({
      css:{display:'block',cursor:'pointer'},
      show:false
    })
  }
  render(){
    let options = [];
    this.state.options.map((option) => {
      options.push(<SelectOption text = {option.name} key={option.name} css ={this.state.css} tel ={this.tellVal.bind(this,option.name)}/>)
    });

    return(
      <div>
        <ul style={{width:400 + "px",height:20 + "px" ,border:'1px solid #ddd'}} onClick={this.changeShow}>
          <InputFilter filterArr={this.changArr.bind(this)} cli ={this.showLi.bind(this)}/>
          {options}
        </ul>
      </div>
    )
  }
}

export default SelectOptions;
